<template>
  <div class="box">
    <el-row>
      <el-col :span="24">
        <el-card shadow="never">
          <el-col :span="24">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
              <el-form-item label="文件名">
                <el-input v-model="formInline.name" placeholder="请输出要导出的文件名称"></el-input>
              </el-form-item>
              <el-form-item label="文件类型">
                <el-select v-model="formInline.region" placeholder="文件类型">
                  <el-option label="xlsx" value="xlsx"></el-option>
                  <el-option label="csv" value="csv"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit">导出Excel</el-button>
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="24" class="table">
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                type="index"
                label="序号"
                width="50">
              </el-table-column>
              <el-table-column
                prop="title"
                label="标题"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
              >
              </el-table-column>
              <el-table-column
                prop="clickNum"
                label="访问量"
              >
              </el-table-column>
              <el-table-column
                prop="date"
                label="日期"
              >
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址"
              >
              </el-table-column>
            </el-table>
          </el-col>

        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from 'axios'
import { xlsx } from '@/utils/excel'
import Papa from 'papaparse'
export default {
  name: 'index',
  data() {
    return {
      xlsx:xlsx,
      formInline: {
        name: '',
        region: 'xlsx'
      },
      tableData: []
    }
  },
  methods: {
    onSubmit() {
      let name
      if (this.formInline.name === ''){
        name = 'admin'
      }else {
        name = this.formInline.name
      }
      if (this.formInline.region === 'xlsx'){
        this.xlsx(this.tableData,{
          id:'序号',
          title:'标题',
          name:'姓名',
          clickNum:'访问量',
          date:'日期',
          address:'地址'
        },name)
      }else if (this.formInline.region === 'csv'){
        let csv = Papa.unparse(this.tableData);
        //定义文件内容，类型必须为Blob 否则createObjectURL会报错
        let content = new Blob([csv]);
        //生成url对象
        let urlObject = window.URL || window.webkitURL || window;
        let url = urlObject.createObjectURL(content);
        //生成<a></a>DOM元素
        let el = document.createElement("a");
        //链接赋值
        el.href = url;
        el.download =  `${name}.csv`;
        //必须点击否则不会下载
        el.click();
        //移除链接释放资源
        urlObject.revokeObjectURL(url);
      }
    },
    fetchData() {
      this.loading = true
      axios.get('http://route.showapi.com/90-27').then(res => {
        this.tableData = res.data._data.data.rows
      }).catch(err => {
      })
    },
  },
  mounted() {
    this.fetchData()
  }
}
</script>

<style scoped lang="scss">
.box {
  margin-bottom: 50px;
  ::v-deep.el-form-item__label {
    font-weight: 400;
  }
  .table {
    margin-top: 20px;
    padding-bottom: 20px;
    ::v-deep.el-icon-rank{
      cursor: move;
    }
    ::v-deep.cell {
      font-size: 14px;
      font-weight: 400;
      color: #000;
      text-overflow: unset;
      text-align: center;
    }
    ::v-deep.el-date-editor.el-input,  ::v-deep.el-date-editor .el-input__inner {
      width: 137px;
    }
  }
}
</style>
